<script lang="ts" setup>
import { list } from 'postcss';
import { stocklist } from './composables/stockList'
import StockTable from './widgets/StockListTable.vue'

const {stockdetail, fetch, dataList, isLoading, filters, sorting, pagination, condition, ...stockApi } = stocklist()

</script>

<template>
    <h1 class="page-title">股票列表</h1>
    <VaCard>
      <VaCardContent>
        <div class="flex flex-col md:flex-row gap-2 mb-2 justify-between">
          <div class="flex flex-col md:flex-row gap-2 justify-start">
            <VaButtonToggle
             v-model="filters.isActive"
              color="background-element"
              border-color="background-element"
              :options="[
                { label: 'Active', value: true },
                { label: 'Inactive', value: false },
              ]"
            />
            <VaInput v-model="filters.search" placeholder="Search">
              <template #prependInner>
                <VaIcon name="search" color="secondary" size="small" />
              </template>
            </VaInput>

            <VaInput v-model="filters.category_name" placeholder="类别">
              <template #prependInner>
                <VaIcon name="search" color="secondary" size="small" />
              </template>
            </VaInput>
          </div>
          <VaButton @click="fetch()">emo</VaButton>
        </div>

        <StockTable
         v-model:condition="condition"
         v-model:sort-by="sorting.sortBy"
         v-model:sorting-order="sorting.sortingOrder"
         v-model:stockdetail="stockdetail"
        :list="dataList"
        :loading="isLoading"
        :pagination="pagination"
        />
      </VaCardContent>
    </VaCard>
  </template>